<template>
  <div>
    <!-- 拖拽上传 -->
    <el-upload
      class="upload-demo"
      drag
      :action="upfileurl"
      multiple
      :headers="headers"
      :on-success="success"
      :on-error="error"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <!-- 搜索框 -->
    <el-row id="" style="padding: 20px 0">
      <el-col :span="18">
        <el-input v-model="names" placeholder="标题名称"></el-input>
      </el-col>
      <el-col :span="6" style="padding-left: 15px">
        <el-button type="primary" @click="getuserlist(1)">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <!-- 功能按钮 -->
    <el-button
      type="primary"
      v-for="i in $store.state.user.menulist[this.$route.path]"
      :key="i.id"
      @click="btn(i.code)"
      >{{ i.name }}</el-button
    >
    <!--  {{ this.$store.state.user.menulist[this.$route.path] }} -->
    <!-- table表格 -->
    <div v-if="tableData" style="padding:20px 0;">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="500"
        :highlight-current-row="true"
      >
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"> </el-table-column>
        <el-table-column label="文件预览">
          <template slot-scope="scope">
            <img :src="scope.row.realFileName" alt="" style="height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :background="true"
        layout="prev, pager, next"
        :total="total"
        :page-size="5"
        @current-change="pagetype"
      >
      </el-pagination>
    </div>
    <!-- 功能组件 -->

    <!--  <mgr-add
      :type="tabletype.mgrAdd"
      :fun="cleartype"
      :tname="'mgrAdd'"
    ></mgr-add>
    
    <mgr-edit
      :type="tabletype.mgrEdit"
      :fun="cleartype"
      :tname="'mgrEdit'"
      :tablerow="tablerow"
    ></mgr-edit>
  
    <mgr-delete
      :type="tabletype.mgrDelete"
      :fun="cleartype"
      :tname="'mgrDelete'"
      :tablerow="tablerow"
    ></mgr-delete>
   
    <mgr-setrole
      :type="tabletype.mgrSetRole"
      :fun="cleartype"
      :tname="'mgrSetRole'"
      :tablerow="tablerow"
    ></mgr-setrole> -->
  </div>
</template>

<script>
// 引入网络请求的组价
import { http, filemgrlist, downloadfile, file } from "../../api/api";
// 引入添加功能的组件
/* import MgrAdd from "./MgrAdd"; // 添加用户
import MgrEdit from "./MgrEdit"; // 修改用户
import MgrDelete from "./MgrDelete"; //删除用户
import MgrSetrole from "./MgrSetrole"; //角色分配 */
export default {
  data() {
    return {
      tableData: "", //用户列表数据
      total: Number(), //总数量
      names: "", //搜索的名字
      tabletype: {
        //功能对话框状态
        /*   mgrAdd: false, //添加用户
        mgrEdit: false, //修改用户
        mgrDelete: false, //删除用户
        mgrSetRole: false, //分配角色 */
      },
      // 单元格选择的对象
      /*   tablerow: "", */
      // 记录当前页码
      page: 1,
      upfileurl: http + file, //图片上传的地址
      headers: {
        //文件上传的请求头
        "constnet-type": "multipart/form-data",
        "Authorization": localStorage.token,
      },
    };
  },
  components: {
    /*  MgrAdd,
    MgrEdit,
    MgrDelete,
    MgrSetrole, */
  },
  mounted() {
    this.getuserlist(this.page);
  },
  methods: {
    // 拖拽成功后的回调
    success(data) {
      console.log(data);
      if (data.msg == "成功") {
        this.$message.success("上传成功");
        this.getuserlist(this.page);
      } else {
        this.$message.error(data.msg);
      }
    },
    error(error) {
      this.$message.error(error.message);
    },

    // 下载按钮
    downloadFile(row) {
      console.log(row);
      location.href = http+downloadfile+`?idFile=${row.id}&fileName=${row.originalFileName}`;
      /*  this.$http
        .get( http + downloadfile, {
          params: {
            idFile: row.id,
            fileName: row.originalFileName,
          },
        })
        .then(
          (data) => {
            console.log(data.data.msg);
            if (data.data.msg == "成功") {
              console.log(data.data);
              this.$message.success("提交数据成功");
            } else {
              this.$message.error(data.data.message);
            }
          },
          (err) => {
            this.$message.error(err.data.message);
          }
        ); */
    },
    // 对话框关闭回调
    /* cleartype(type) {
      this.tabletype[type] = false;
      this.getuserlist(this.page);
      this.tablerow = "";
    }, */
    // 选择单元格触发的事件
    /* celltable(row) {
      this.tablerow = row;
      console.log(row);
    }, */
    // 统一的功能按钮
    /* btn(a) {
      if (a == "mgrAdd") {
        this.tabletype[a] = true;
      } else {
        if (this.tablerow == "") {
          this.$message.error("请选择要操作的用户");
        } else {
          this.tabletype[a] = true;
        }
      }
    }, */
    // 重置功能
    reset() {
      this.names = "";
      this.getuserlist(1);
    },
    // 点击页码触发的事件
    pagetype(page) {
      this.page = page;
      this.getuserlist(page);
    },
    // 网络请求列表数量
    getuserlist(page) {
      // 开启动画
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.$http
        .get(http + filemgrlist, {
          params: {
            page: page,
            limit: 10,
            originalFileName: this.names, //文件地址
          },
        })
        .then(
          (data) => {
            console.log(data.data.msg);
            if (data.data.msg == "成功") {
              // 得到的用户的表格信息
              this.tableData = data.data.data.records;
              // 总数
              this.total = data.data.data.total;
              this.tableData.forEach((item, index, arr) => {
                arr[index].realFileName = item.realFileName.replace(
                  /\/local\/program\/nginx\/conf/g,
                  "http://39.101.217.150"
                );
              });
              //  关闭动画
              setTimeout(()=>{
                  loading.close();
              },1000)
            } else {
              this.$message.error(data.data.message);
            }
          },
          (err) => {
            this.$message.error(err.data.message);
          }
        );
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>